<template>
	<view class="page" :style="{ 'min-height': h + 'px', 'padding-top': mt + 'px' }">
		<c-nav-bar :title="title"></c-nav-bar>
		<view class="hander">
			<view class="one">
				<view class="title">
					体验如何？
				</view>
			</view>
			<view class="two">
				<view class="demo-layout bg-purple-dark" @click="tab(1,5)">
					<view class="">
						<view class="image">
							<image src="https://i.ringzle.com/file/20240103/79cc8b2d35674193a37b060e005cadf1.png"
								mode="aspectFill" v-show="tabIndex ==1"></image>
							<image src="https://i.ringzle.com/file/20240102/5a73d439f4664f60a2a6ea130c08a70f.png"
								mode="aspectFill" v-show="tabIndex !==1"></image>
						</view>
						<view class="text">
							非常满意
						</view>
					</view>
				</view>
				<view class="demo-layout bg-purple-dark" @click="tab(2,4)">
					<view class="">
						<view class="image">
							<image src="https://i.ringzle.com/file/20240330/7c3a7458d6c74bc5adf0215f55593a9c.png"
								mode="aspectFill" v-show="tabIndex ==2"></image>
							<image src="https://i.ringzle.com/file/20240330/84e83bcaf5e449d499a9ddb992c2b7f8.png"
								mode="aspectFill" v-show="tabIndex !==2"></image>
						</view>
						<view class="text">
							满意
						</view>
					</view>
				</view>
				<view class="demo-layout bg-purple-dark" @click="tab(3,3)">
					<view class="">
						<view class="image">
							<image src="https://i.ringzle.com/file/20240330/5032c60e775f48dcb60c9fa39e328a67.png"
								mode="aspectFill" v-show="tabIndex ==3"></image>
							<image src="https://i.ringzle.com/file/20240330/12eb07970bae453ebc5044b3d16ac4f0.png"
								mode="aspectFill" v-show="tabIndex !==3"></image>
						</view>
						<view class="text">
							一般
						</view>
					</view>
				</view>
				<view class="demo-layout bg-purple" @click="tab(4,2)">
					<view class="">
						<view class="image">
							<image src="https://i.ringzle.com/file/20240330/20bff58d3e684d17868ba026c0d865e8.png"
								mode="aspectFill" v-show="tabIndex ==4"></image>
							<image src="https://i.ringzle.com/file/20240330/355dd2cad4b049ca95d170894f2c2c5e.png"
								mode="aspectFill" v-show="tabIndex !==4"></image>
						</view>
						<view class="text">
							不满意
						</view>
					</view>
				</view>
				<view class="demo-layout bg-purple-light" @click="tab(5,1)">
					<view class="">
						<view class="image">
							<image src="https://i.ringzle.com/file/20240401/aae99275339a4094be4650609e075d35.png"
								mode="aspectFill" v-show="tabIndex ==5"></image>
							<image src="https://i.ringzle.com/file/20240401/08eb2e02128a432fafe4577b12a9184e.png"
								mode="aspectFill" v-show="tabIndex !==5"></image>
						</view>
						<view class="text">
							非常不满意
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="content">
			<u--textarea v-model="dto.comment" placeholder="留下更有帮助性的评价吧！" border="none" height='332rpx'
				autoHeight='true' maxlength='-1'></u--textarea>
		</view>

		<view class="upload" v-if="fileList.length==0">
			<u-upload :fileList="fileList" multiple :maxCount="3" :maxSize="10 * 1024 * 1024" @afterRead="afterRead"
				@delete="deletePic" @oversize="overSize">
				<view class="upload-one">
					<image src="https://i.ringzle.com/file/20240401/30da0557ff3e44488f02562bf16b8bfa.png"
						mode="aspectFill"></image>
				</view>
			</u-upload>
		</view>
		<view class="uploads" v-else>
			<u-upload :fileList="fileList" multiple :maxCount="3" :maxSize="10 * 1024 * 1024" @afterRead="afterRead"
				@delete="deletePic" @oversize="overSize">
				<view class="upload-image">
					<image src="https://i.ringzle.com/file/20240401/30da0557ff3e44488f02562bf16b8bfa.png"
						mode="aspectFill"></image>
				</view>
			</u-upload>
		</view>


		<view class="start">
			<view class="item">
				<text>描述相符</text>
				<u-rate active-color="#FEB000" size="46" inactive-color="#A9B4C1" v-model="dto.describeScore"
					gutter="24"></u-rate>
			</view>
			<view class="item">
				<text>位置</text>
				<u-rate active-color="#FEB000" size="46" inactive-color="#A9B4C1" v-model="dto.locationScore"
					gutter="24"></u-rate>
			</view>
			<view class="item">
				<text>便捷性</text>
				<u-rate active-color="#FEB000" size="46" inactive-color="#A9B4C1" v-model="dto.convenienceScore"
					gutter="24"></u-rate>
			</view>
			<view class="item">
				<text>服务</text>
				<u-rate active-color="#FEB000" size="46" inactive-color="#A9B4C1" v-model="dto.serviceScore"
					gutter="24"></u-rate>
			</view>
			<view class="item">
				<text>卫生</text>
				<u-rate active-color="#FEB000" size="46" inactive-color="#A9B4C1" v-model="dto.hygieneScore"
					gutter="24"></u-rate>
			</view>
			<view class="item">
				<text>性价比</text>
				<u-rate active-color="#FEB000" size="46" inactive-color="#A9B4C1" v-model="dto.costScore"
					gutter="24"></u-rate>
			</view>
		</view>

		<view class="btn" @click="save">
			发布
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: "评价",
				h: uni.getSystemInfoSync().windowHeight,
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				value5: '',
				tabIndex: null,
				fileList: [],
				picList: [],
				imageList: [],
				dto: {
					comment: '', //内容
					homestayId: '', //  关联民宿id
					userId: JSON.parse(wx.getStorageSync('userInfo')).id, // 评价用户id
					convenienceScore: '', //	便捷性评分(总分5)
					costScore: '', //性价比评分(总分5)
					describeScore: '', //描述评分(总分5)
					hygieneScore: '', //卫生评分(总分5)
					locationScore: '', //位置评分(总分5)
					serviceScore: '', //服务评分(总分5)

					// id: '', //	主键id
					imgUrl: '', //	图片/视频地址 多个以,分割
					orderCode: '', //订单编号
					score: '', //评论分数(总分5: 1非常不推荐 2不推荐 3体验一般 4推荐 5非常好)

				},
				detail: null,
				fileList: [],
				imgUrlList: []
			}
		},
		onLoad(option) {
			let obj = JSON.parse(option.obj);
			// this.dto.id = obj.id
			this.dto.homestayId = obj.homestayId
			this.dto.orderCode = obj.orderCode
			console.log(obj);

		},
		methods: {
			// 图片大小超出最大允许大小
			overSize(e) {
				uni.$u.toast('上传图片大小不能超过10MB!');
			},
			// 删除图片
			deletePic(event) {
				this.fileList.splice(event.index, 1);
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let Lists = [].concat(event.file);
				let fileListLen = this.fileList.length;
				Lists.map((item) => {
					this.picList.push(
						item.url,
					)
				})

				for (let i = 0; i < Lists.length; i++) {
					const result = await this.uploadFilePromise(Lists[i].url);
					wx.getImageInfo({
						src: Lists[i].url,
						success: res => {
							this.imgUrlList.push(result)
							this.dto.imgUrl = this.imgUrlList.toString()
						}
					})
				}
			},
			//上传图片
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					this.$api.detectionContent(url,2).then(result=>{
						if(result.code===0){
					let a = uni.uploadFile({
						url: 'https://i.ringzle.com/island-cloud-server/oss/file/aliyunUpload',
						filePath: url,
						name: 'file',
						header: {
							token: wx.getStorageSync('access_token')
						},
						success: (res) => {
							let data = JSON.parse(res.data);
							this.fileList.push({
								url: data.data.url
							})
							resolve(data.data.url);
						}
					});
					}else this.$showToast(result.msg)
					})
				})
			},


			// 选择
			tab(index, e) {
				console.log(index, e);
				this.tabIndex = index;
				this.dto.score = e;
			},
			// 发布
			save() {
				if (!this.dto.score) return this.$showToast('请选择评价');
				if (!this.dto.comment) return this.$showToast('请添加评价');
				if (!this.dto.describeScore) return this.$showToast('请选择描述评分');
				if (!this.dto.locationScore) return this.$showToast('请选择位置评分');
				if (!this.dto.convenienceScore) return this.$showToast('请选择便捷性评分');
				if (!this.dto.serviceScore) return this.$showToast('请选择服务评分');
				if (!this.dto.hygieneScore) return this.$showToast('请选择卫生评分');
				if (!this.dto.costScore) return this.$showToast('请选择性价比评分');
				this.$api.detectionContent(this.dto.comment).then(result => {
					if (result.code !== 0) return this.$showToast(result.msg);
					this.$api.post('/api/hotel/comment', this.dto).then(res => {
						if (res.data.code === 0) {
							this.$showToast('评价成功');
							setTimeout(() => {
								uni.redirectTo({
									url: '/pagesMy/order/index?name=酒店民宿&type=0&typeIndex=1'
								})
							}, 1000)
						} else this.$showModal(res.data.msg);
					})
				})
			},
		}
	}
</script>
<style lang="less">
	.uploads {
		.upload-image {
			width: 200rpx !important;
			height: 200rpx !important;
			margin: 15rpx !important;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.uploads {
		margin-top: 48rpx;

		// width: 200rpx;
		// height: 200rpx;
		.upload-ones {
			// margin: 32rpx auto 20rpx;
			margin: 0 auto;
			width: 200rpx;
			height: 200rpx;
			border-radius: 16rpx;
			background-color: #F5F8FA;

			.image {
				margin: 32rpx auto 20rpx !important;
				width: 72rpx;
				height: 72rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	.u-upload__deletable {
		.u-icon__icon {
			font-size: 20rpx !important;
			top: 7rpx !important;
		}
	}

	// .u-icon__icon {
	// 	font-size: 20rpx;
	// 	top
	// }
	.u-upload__button {
		width: 200rpx !important;
		height: 200rpx !important;
	}

	.u-upload__wrap__preview__image {
		width: 200rpx !important;
		height: 200rpx !important;
	}

	.u-upload__wrap__preview {
		margin: 15rpx !important;
	}

	.u-textarea {
		height: 332rpx !important;
	}

	.u-textarea__field {
		height: 332rpx !important;
	}
</style>



<style lang="scss">
	.page {
		padding: 30rpx;
		// padding: 30rpx;
		box-sizing: border-box;
		padding-bottom: 190rpx;

		.hander {
			.one {
				.title {
					font-size: 36rpx;
					color: #111111;
					margin-top: 20rpx;
					font-weight: bold;
					line-height: 50rpx;
				}
			}

			.two {
				margin-top: 38rpx;
				border-bottom: 1rpx solid #EFEFEF;
				padding-bottom: 30rpx;
				display: grid;
				grid-template-columns: 17% 17% 17% 17% 22%;
				gap: 0 10rpx;
				width: 100%;
				padding-left: 4%;
				box-sizing: border-box;

				.demo-layout {
					text-align: center;
					align-items: center;

					.image {
						display: inline-block;
						width: 80rpx;
						height: 80rpx;
						margin-bottom: 28rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.text {
						margin: 20rpx 0rpx;
						font-size: 28rpx;
						color: #88919D;
						font-weight: Regular;
					}
				}
			}
		}

		.content {
			margin-top: 20rpx;
		}

		.start {
			margin: 20rpx auto;
			background: #fff;
			border-top: 20rpx solid #F5F8FA;
			padding: 40rpx 0 0;

			.item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 48rpx;

				text {
					font-size: 30rpx;
					color: #333;
				}
			}
		}

		.upload {
			margin-top: 48rpx;
			width: 100%;
			height: 200rpx;
			border-radius: 16rpx;
			background-color: #F5F8FA;
			display: flex;
			align-items: center;
			text-align: center;

			.upload-one {
				margin: 0 245rpx;
				width: 200rpx;
				height: 200rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.texts {
			// padding-bottom: 200rpx;
			margin-top: 40rpx;
			font-size: 26rpx;
			color: #88919D;
			font-weight: Regular;
		}

		.btn {
			text-align: center;
			margin: 0 auto;
			position: fixed;
			width: 702rpx;
			font-weight: bold;
			bottom: 60rpx;
			line-height: 38px;
			height: 88rpx;
			border-radius: 50rpx;
			border: 1rpx;
			background-color: #007A69;
			font-size: 32rpx;
			color: #FFFFFF;
			left: 24rpx;
		}
	}
</style>